<template>
    <a-modal class="fillmaskModal" title="新建任务内容" :width="1500" :visible="visible" :confirmLoading="confirmLoading"
        @ok="handleOk" @cancel="handleCancel" cancelText="取消" wrapClassName="ant-modal-cust-warp"
        style="top:5%;height: 90%;overflow-y: hidden">
        <div>
            <a-form :form="form" style="max-width: 50%;  margin: 30px auto 0;">
                <!-- 请输入任务名称 -->
                <a-form-model-item label="任务名称" prop="请输入任务名称">
                    <a-input :value="iptValue" placeholder="请输入任务名称" @change="handleval" />
                </a-form-model-item>

                <!-- 填报周期 -->
                <a-form-model-item label="填报周期">
                    <!-- <a-date-picker :inputReadOnly="true" @change="onRangeChange" style="width: 100%">
                        <a-icon slot="suffixIcon" type="calendar" />
                    </a-date-picker> -->
                    <a-range-picker
                        :ranges="{ Today: [moment(), moment()], 'This Month': [moment(), moment().endOf('month')] }"
                        @change="onChange" />
                </a-form-model-item>

                <!-- 填报标准 -->
                <!-- <a-form-model-item label="请选择填报标准">
                    <a-select default-value="请选择填报标准" v-decorator="['standard']">
                        <a-select-option value="GRI">GRI</a-select-option>
                        <a-select-option value="TCTD">TCTD</a-select-option>
                        <a-select-option value="ISSB">ISSB</a-select-option>
                    </a-select>
                </a-form-model-item> -->

                <!-- 请选择模板 -->
                <a-form-model-item label="请选择模板" class="formSty">
                    <a-select :default-value="defaultValue" style="width: 150px;" @change="handleChange">
                        <a-select-option :value="item.name" v-for="(item, index) in dataSource" :key="index">{{ item.name

                        }}</a-select-option>
                    </a-select>

                    <a-button type="primary" style="margin: 0 30px;" @click="buttonTemplate">
                        自定义模板
                    </a-button>
                </a-form-model-item>

                <a-button type="primary" style="margin: 0 50%;">
                    下一步
                </a-button>

                <!-- 增加模板选中按钮 -->

            </a-form>
            <div v-show="templateShow == 0">
                <a-card :bordered="true">
                    <a-steps class="steps" type="navigation" :style="stepStyle" v-model="currentTab" @change="changeStep"
                        simple>

                        <!-- <a-steps v-model:current="current" type="navigation" size="small" :style="stepStyle"> -->
                        <a-step title="部门架构" />
                        <a-step title="企业指标" />
                        <!-- <a-step title="生成模板" /> -->

                    </a-steps>
                    <div class="content">
                        <Architecture v-if="currentTab === 0" @nextStep="nextStep" />
                        <EnterpriseIndex v-else-if="currentTab === 1" @nextStep1="nextStep1" @prevStep="prevStep" />
                        <!-- <TemplateGeneration v-else :selectArr="selectArr" @prevStep="prevStep" /> -->
                    </div>
                </a-card>
            </div>
        </div>
    </a-modal>
</template>



<script>

// 部门架构
import Architecture from './Architecture'

// 企业指标
import EnterpriseIndex from './EnterpriseIndex'

// 生成模板
// import TemplateGeneration from './TemplateGeneration'

import moment from 'moment';

import axios from 'axios';


export default {
    data() {
        return {
            name: '',
            form: null,  // 手机表单中的数据
            visible: true,
            // 模板切换显示
            templateShow: true,
            confirmLoading: false,
            currentTab: 0,
            selectArr: [],
            stepStyle: {
                marginBottom: '60px',
                boxShadow: '0px -1px 0 0 #e8e8e8 inset',
                //backgroundColor:'',
                borderTop: '2px #333 blue'
            },
            // 获取当前时间
            currentDate: '',
            // 获取数组的长度
            tableLength: 0,
            dateFormat: 'YYYY/MM/DD',
            monthFormat: 'YYYY/MM',
            defaultValue: '请选择默认模板',
            dataSource: [],
            selectValue: '',
            lengthInfo: null,
            // 获取任务名称
            iptValue: '',
            // 开始时间
            dateStrings: '',
            // 结束时间
            dateStringsEnd: ''
        }
    },
    created() {
        this.form = this.$form.createForm(this)
    },
    components: {
        Architecture,
        EnterpriseIndex,
        // TemplateGeneration
    },
    mounted() {
        // 获取当前的时间
        this.getCurrentDate()

        // 获取定义模板的数据
        this.templateTabdta()

        // 传递选中的选项
        this.$bus.$on('getLength', (params) => {
            this.tableLength = params
        })
        // 传递参数判断是第几页
        this.$bus.$on('aaa', (a) => {
            this.currentTab = a
        });


    },
    methods: {
        // 获取定义模板的数据
        templateTabdta() {
            this.$nextTick(async () => {
                const result = await axios.get('/mock/templateManagementTabdata')
                this.dataSource = result.data.data
                this.lengthInfo = this.dataSource.length
                console.log(this.dataSource, 'this.dataSourcethis.dataSource///////////')
            })
        },


        // 父组件调用方法
        add() {
            this.visible = true
        },

        // 获取当前的时间
        getCurrentDate() {
            const date = new Date();
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0');
            const day = date.getDate();
            this.currentDate = `${year}-${month}-${day}`
        },
        handleval(e) {
            this.iptValue = e.target.value
        },
        // 点击确定
        handleOk() {
            this.confirmLoading = true;
            let formInfo = {
                // 任务名称
                taskName: this.iptValue,
                // 开始时间
                scope3: this.dateStrings,
                // 结束时间
                scope4: this.dateStringsEnd,
                // 操作
                action: ['edit', 'del']

            }
            // 整理数据
            console.log(formInfo)
            // this.$emit('formInfo', formInfo)
            // this.form.validateFields((err, values) => {
            //     if (!err) {
            //         // 整理数据
            //         let index = this.lengthInfo++
            //         // console.log(index, 'indexindexindexindex')
            //         let indexSer = index += 1
            //         // console.log(indexSer, 'indexSerindexSerindexSer')
            //         let formInfo = {
            //             serialNumber: indexSer,
            //             name: this.selectValue,
            //             timer: this.currentDate,
            //             creator: values.taskName,
            //             action: ['edit', 'del']
            //         }
            //         // 通过自定义传递参数
            //         
            //         // console.log(values.taskName, 'valuesvaluesvalues/////////')
            //         // console.log(values.standard, 'standardstandardstandard/////////')
            //     }
            // })
            setTimeout(() => {
                this.visible = false;
                this.confirmLoading = false;
            }, 500);
        },
        // 点击取消
        handleCancel() {
            this.visible = false;
        },

        changeStep(current) {
            // this.currentTab = current;
            // console.log(current, 6666)
        },

        onRangeChange() { },


        prevStep() {
            if (this.currentTab > 0) {
                this.currentTab -= 1
            }
        },
        nextStep(value) {
            this.currentTab = 1
            this.stepObj = value
            console.log(value, 6666)
        },
        nextStep1(value) {
            this.selectArr = value
            this.currentTab = 2
        },

        moment,
        // 填报时间
        onChange(dates, dateStrings) {
            console.log('From: ', dates[0], ', to: ', dates[1]);
            console.log('From: ', dateStrings[0], ', to: ', dateStrings[1]);
            this.dateStrings = dateStrings[0]
            this.dateStringsEnd = dateStrings[1]
        },

        // 点击模板发生变化
        buttonTemplate() {
            this.templateShow = 1
        },
        // 选中选择器的值
        handleChange(value) {
            this.selectValue = value
            console.log(value, 'value//////')
        }
    }
}
</script>

<style lang="scss" >
.fillmaskModal .ant-modal-body {
    padding-top: 0px !important;
    padding-left: 0;
    padding-right: 0;
}

.fillmaskModal .ant-spin-nested-loading {
    padding: 12px 24px !important;
}

.fillmaskModal .ant-select-selection-selected-value {
    font-size: 14px;
}

.formSty {
    display: flex;
}
</style>